<template>
  <div>
    <h2>数组</h2>
    <div>
				<span>
					<input type="text" v-model='fname'>
					<button @click='add'>添加</button>
					<button @click='del'>删除</button>
					<button @click='change'>替换</button>
          <button @click='judge(fname)'>判断</button>
				</span>
    </div>
    <ul>
      <!-- 遍历循环，用li展示数组 -->
      <li :key='index' v-for='(item,index) in list'>{{ item }}</li>
    </ul>
    <h2>动态响应数组</h2>
    <div>
      <ul>
        <li :key='index' v-for='(item,index) in list'>{{ item }}</li>
      </ul>
      <div>{{ info.name }}</div>
      <div>{{ info.age }}</div>
      <div>{{ info.gender }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TestArray",
  data() {
    return {
      fname: '',
      list: ['apple', 'orange', 'banana'],
      info: {
        name: 'lisi',
        age: 12
      }
    }
  },
  methods: {
    add: function () {
      this.list.push(this.fname);
    },
    del: function () {
      this.list.pop();
    },
    change: function () {
      this.list = this.list.slice(0, 2)
      this.$set(this.list, 0, 'lemon'); // 添加的是动态绑定的数据

    },
    judge: function (ele) {
      let flag = this.list.includes(ele)
      alert(flag)
    }
  }

}
</script>

<style scoped>

</style>